<template>
  <div class="page-container">
	<!--新增编辑界面-->
	<el-dialog :title="operation?'批次出库-新增':'批次出库-编辑'" width="80%" :visible.sync="dialogVisible" :close-on-click-modal="false" @opened="getDetials"  :before-close="handleClose" >
		<div   style="float:left;">
		<el-form :model="subDataForm" label-width="80px"  :inline="true"  :rules="dataFormRules" ref="dataForm" size="mini" label-position="right">
			 
					<el-form-item label="ID" prop="id" v-if="false">
						<el-input v-model="subDataForm.id" disabled="true" auto-complete="off"></el-input>
					</el-form-item>
				
					<el-form-item :label="$t('field.receipt.receiptNo')" prop="receiptNo">
						<el-input v-model="subDataForm.doNo" auto-complete="off"></el-input>
					</el-form-item>
			 
					<el-form-item label="去向" prop="direction" >
						<el-input v-model="subDataForm.direction" auto-complete="off"></el-input>
					</el-form-item>
				 	<s-dict name="stnOut" v-model="subDataForm.stn" v-if="false">  </s-dict > 
				 		
		 		
		</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button :size="size" @click.native="handleHiddenOut">{{$t('action.cancel')}}</el-button>
			<el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
			<el-button icon="el-icon-edit" :size="size"  @click.native="handleAddDetailEdit"  >选择批次 </el-button>
		</div>

		<div v-show="operation">
			<div class="app-container">
				<el-table v-loading="listLoading" :data="dto.detList" height="250" border fit highlight-current-row style="width: 100%"  size="mini"  @cell-click="clickTable"   @selection-change="handleSelectionChange" >			
					<el-table-column type="selection" label="选择" align="center" width="55" ></el-table-column>
				    <el-table-column width="120px" align="center" label="批次号"   fixed="right" prop="batchNo" key="batchNo"  header-align="center" ></el-table-column>
					<el-table-column class-name="status-col"  :label="$t('field.itemName')"    min-width="110" prop="itemId"  align="center" fixed="right"  header-align="center"  :formatter="itemFilter"></el-table-column>
					<el-table-column width="200px"   :label="$t('field.planCount')"    align="center"  fixed="right"  header-align="center" >
						<template slot-scope="{row}"  >
							<template v-if="row.edit">
								<el-input v-model="row.planCount" class="edit-input" size="mini"  />
							</template>
							<span  style="cursor: pointer;" v-else  >{{ row.planCount }}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" :label="$t('action.edit')" width="120" fixed="right" >
							<template slot-scope="{row}">
								<el-button v-if="row.edit" type="success" size="mini"  @click="row.edit=!row.edit" icon="el-icon-circle-check-outline" > {{$t('action.comfirm')}} 
								</el-button>
								<el-button v-else type="primary" size="mini" icon="el-icon-edit" @click="row.edit=!row.edit" >   {{$t('action.edit')}} 
								</el-button>
							</template>
					</el-table-column>
					<el-table-column :label="$t('action.operation')" width="105" fixed="right"  header-align="center" align="center">	
						<template slot-scope="scope">
							<kt-button icon="fa fa-trash" :label="$t('action.delete')"  perms="wh:pk:start"   :size="size" type="danger" @click="handleDelete(scope.$index, scope.row)" />
						</template>
					</el-table-column>
		
				</el-table>
				
			</div>
		</div>
	</el-dialog>
	  <batch-select :key="componentKey"  :itemDialogVisible="itemDialogVisible" @handleSelect="handleSelect"  @itemHidden="itemHidden"  ></batch-select> 
  </div>
</template>

<script>
 
import KtButton from "@/views/Core/KtButton"
import { format } from "@/utils/datetime"
import BatchSelect from "@/dialog/BatchSelect"
import {  dictsFormat ,getItemName} from "@/utils/myUtil"
import SDict from "@/components/Kj/SDict"
export default {
	name: 'DooBatch',
	components:{
		KtButton,
		BatchSelect,
		SDict
	},
	filters: {
  	},
	props:{
		subDataForm:{
			type: Object
		},
	    dialogVisible:{
			type: Boolean
		},
		operation:{
			type: Boolean
		}
	},
	
	data() {
		return {
			size: 'mini',
			   listLoading: false,
			list:[],
		 
			dto:{detList:[],deleteIds:[]},
		    componentKey: 0,
			pageResult: {},
      		multipleTable: [],     //存放选中值的数组
			editLoading: false, 
			pageziRequest: { pageziNum: 1, pageziSize: 3 },
			itemDialogVisible:false,
			stockDialogVisible:false, 
			detailId:undefined,
			showReceipOutId:false,
			orderDetailData:null,
			filters: {
					boxCode: '', pageNum: 1, pageSize: 2000
				},
		}
	},
	computed: {
		dataFormRules() {
					const dataFormRules= {
						stn:[{ required: true, message: "请输入站台号", trigger: 'blur' }]
						};
					return dataFormRules;
			}		
	},
	methods: {
			
		confirmEdit(row) {
					//row.edit = false
					this.$api.doo.updateDetials({id:row.id,planCount:row.planCount,pid: row.pid}).then((res) => {
					if (res.code == 200) {
						this.getDetials();
						} else {
						this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
						this.getDetials();
						} 
					})				
			},
		 
		clickTable:function(row, column, cell, event){//展开事件日志列表
		//alert("asdf")
		},
		handleSelectionChange(val) {
			this.multipleTable = val;   
			this.detailId=val.map(item => item.id).toString();            //  this.multipleTable 选中的值
			console.log(val);
			console.log(this.detailId);
		},
		//绑定托盘
		handleShowStockBind: function () {			
			this.stockDialogVisible = true
			this.showReceipOutId=false
			this.componentKey += 1; 
		},
		//查看绑定
		handleShowStock: function () {		
			this.stockDialogVisible = true
			this.showReceipOutId=true
			this.componentKey += 1; 
		},		
		 
		itemFilter:  function (row, column, cellValue, index){		
 
				return getItemName(cellValue)
      	},
		// 换页刷新
		refreshPageRequest: function (pageNum) { 
			this.filters.pageNum = pageNum
			this.$api.coreStock.QueryCoreStockDetailPage(this.filters).then((res) => {
				this.orderDetailData = res.data
			})
		},

		handleDelete:function(index,row){
			if(row.id>0){
				this.dto.deleteIds.push(row.id)
			}
			this.dto.detList.splice(index,1)
				
		},
		handleSelect:function(data){	 
			for(var i=0;i<data.length;i++){
				var d=data[i];
				this.dto.detList.push({batchId:d.id,batchNo:d.batchNo,itemId:d.itemId,edit:false});
			}
			this.itemHidden();
		},
		 
	
		handleClose:function(done){
		  this.$emit('receiptHidden', {})
 			done();
		},
		itemHidden:function(){
			this.itemDialogVisible=false;
			this.stockDialogVisible=false;
		},
		// 获取分页数据
		 getDetials :function() {
			if(this.subDataForm==undefined||this.subDataForm.id==undefined||this.subDataForm.id==0){
				return;
			}
			this.listLoading = true
			this.$api.doo.getDetials(this.subDataForm).then((res) => { 
 				const dets = res.data
				this.dto.detList = dets.map(v => {
					this.$set(v, 'edit', false) 
					return v
				})
			    this.listLoading = false
			})
		},
		handleAddDetailEdit: function () {
			this.componentKey += 1; 
			this.itemDialogVisible = true
					
		},
		handleHiddenOut: function (params) {
			this.$emit('receiptHidden', {})
		},		
		// 编辑
		submitForm: function () {
			if (this.subDataForm.status == 2 || this.subDataForm.status == 3) {
        		this.$message({ message: "出库单非待执行状态无法修改", type: 'error' })
      		} else {
				this.$refs.dataForm.validate((valid) => {
					if (valid) {
						this.$confirm(this.$t('action.isConfirm'), this.$t('action.tips'), {}).then(() => {
							this.editLoading = true
							this.dto.main=this.subDataForm;
							this.dto.main.outType=1000;
							this.$api.doo.saveDoo(this.dto).then((res) => {
								this.editLoading = false
								if(res.code == 200) {
									this.$message({ message: this.$t('action.operateSucess'), type: 'success' })
									this.handleHiddenOut();
								} else {
									this.$message({message: this.$t('action.operateFail') + res.msg, type: 'error'})
								}
							
							})								
						})
					}
				})
	  		}
		}

	},	
	mounted() {
  
	}
}
</script>

<style scoped>
	
</style>